<template>
  <div class="root">
    <ul class="left">
      <li>
        <span>配送至：中国大陆</span>
      </li>
      <li>
        <router-link to="/index/help"><i class="el-icon-lollipop"></i> 需要帮助</router-link>
      </li>
      <li>
        <span><i class="el-icon-mobile-phone
"></i> 400 6588 555</span>
      </li>
      <li>
        <a href="#">环保与可持续性</a>
      </li>
    </ul>
    <ul class="right">
      <li>
        <a href="#"><i class="el-icon-goods"></i><span class="num">({{num}})</span></a>
      </li>
      <li>
        <a href="#"><i class="el-icon-user"></i></a>
      </li>
      <li>
        <a href="#"><i class="el-icon-star-off"></i></a>
      </li>
      <li>
        <a href="#"><i class="el-icon-location-information"></i></a>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "HeaderTools",
    data(){
      return{
        num:'0'
      }
    }
  }
</script>

<style scoped>
  .root {
    height: 40px;
    font-size: .7875rem;
    padding: 0 40px;
    box-sizing: border-box;
    box-shadow: inset 0 -1px 0 0 #eae8e4;
    line-height: 40px;
  }

  .left li {
    float: left;
    margin-right: 20px;
  }

  .right li {
    float: right;
    margin-left: 2rem;
    font-size: 1.3rem;
  }
  .right li:hover{
    border-bottom: 1px solid black;
  }
  .num{
    font-size: 0.4rem;
    position: relative;
    bottom: 12px;
    right: 2px;
  }
</style>
